<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索</title>
</head>

<body>
    <!--  
    在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。 这个想法是，当在搜索框中输入时，列表中会显示5个先前的搜索字词。 当列表项目数量超过5时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示5个以前的搜索字词。 完成该应用程序，
    我们需要您： 在 //number 1 注释下面添加一行，将输入到搜索框中的当前值添加到数组的开头。 这可以使用 searchInput.value 检索。 在 // number 2 注释下方添加一行，该行删除数组末尾的当前值。 -->
    <!-- Learn about this code on MDN: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays -->
    <div class="output" style="min-height: 150px;">
        <input type="text">
        <button>Search</button>
        <ul>
        </ul>
    </div>


    <script>
    var list = document.querySelector('.output ul');
    var searchInput = document.querySelector('.output input');
    var searchBtn = document.querySelector('.output button');

    list.innerHTML = '';

    var myHistory = [];

    searchBtn.onclick = function() {
        // we will only allow a term to be entered if the search input isn't empty
        if (searchInput.value !== '') {
            // number 1
            myHistory.unshift(searchInput.value)

            // empty the list so that we don't display duplicate entries
            // the display is regenerated every time a search term is entered.
            list.innerHTML = '';

            // loop through the array, and display all the search terms in the list
            for (var i = 0; i < myHistory.length; i++) {
                var itemText = myHistory[i];
                var listItem = document.createElement('li');
                listItem.textContent = itemText;
                list.appendChild(listItem);
            }

            // If the array length is 5 or more, remove the oldest search term
            if (myHistory.length >= 5) {
                // number 2
                myHistory.pop();
                 
            }

            // empty the search input and focus it, ready for the next term to be entered
            searchInput.value = '';
            searchInput.focus();
        }
    }
    </script>
</body>

</html>